<template>
	
	<view>
		
		<!-- #ifdef APP-PLUS || H5 -->
		<public-navbar><text style="margin-left: 30rpx;">提现</text></public-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<public-fixed-box top>
			<public-navbar>提现</public-navbar>
		</public-fixed-box>
		<!-- #endif -->
		
		<view class="container" style="padding:0;">
			<view class="payment-selection-group" style="padding-top: 20rpx;">
				<text style="font-weight: bold;padding-left: 15px;">选择提现方式</text>
				<view class="payment-selection-list" style="padding: 0 15px;">
					<u-radio-group v-model="paymethod" active-color="#FC7404">
						<view style="width: 100%;" class="payment-selection-item" @click="changePayM('1')">
							<image class="image-round" :src="ICON_WECHATPAY" style="background-color: #0cbb07;"></image>
							<text class="payment-name">微信支付</text>
							<u-radio style="display: block;" name="1"></u-radio>
						</view>
						<view style="width: 100%;"  class="payment-selection-item" @click="changePayM('2')">
							<image class="image-round" :src="ICON_ALIPAY" style="background-color: #1977fb;"></image>
							<text class="payment-name">支付宝</text>
							<u-radio style="display: block;"  name="2"></u-radio>
						</view>
						<view class="payment-selection-item" @click="toBankCard" style="margin-bottom: 24rpx;width: 100%;">
							<image class="image-rect" :src="ICON_UNIONPAY"></image>
							<text class="payment-name">银行卡</text>
							<u-radio name="0" style="display: none;"></u-radio>
							<text>{{cardTitle}}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-radio-group>
				</view>
			</view>
			<u-gap height="24" bg-color="#F5F5F5"></u-gap>
			<view class="payment-selection-group" style="padding: 0 15px;">
				<view
					style="display: flex; flex-direction: row; line-height: 48rpx; align-items: center; margin-top: 40rpx;">
					<text style="font-weight: bold; flex: 1;">提现金额（元）</text>
					<text>可提现余额：<text style="color: #FC7404;">￥{{ withdrawableAmount }}</text></text>
				</view>
				<view style="display: flex; flex-direction: column;">
					<view style="display: flex; flex-direction: row; align-items: center; margin-top: 40rpx;">
						<text style="font-size: 50rpx;">￥</text>
						<input style="font-size: 40rpx; font-weight: bold;" type="number" v-model="withdrawAmount"
							placeholder="请输入提现金额" />
					</view>
					<view style="background-color: #AAA; height: 1rpx; margin-top: 20rpx;"></view>
				</view>
			</view>

			<view>
				<uni-popup ref="pwd" type="center" :animation="false">
					<view
						style="width: 80vw; background-color: #FFF; padding: 30rpx; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;">
						<view>请输入支付密码</view>
						<input class="input-item" adjust-position="false" auto-blur="true" @blur="inputCodeBlur"
							@input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" type="number"
							oneTimeCode maxlength="6" />
						<view class="code-list" @click="focusClick">
							<view class="code-item" v-for="(item,index) in 6" :key="index"
								:style="(index == code.length && focus ? 'border-color:#FC7404;':'')">
								{{ index >= code.length ? '' : '●'}} <!--code[index]}}-->
							</view>
						</view>
						<view
							style="display: flex; flex-direction: row; margin-top: 40rpx; width: 100%; line-height: 70rpx; font-size: 32rpx;">
							<view style="flex: 1; width: 50%; text-align: center;" @click="pwdCancel">取消</view>
							<view style="flex: 1; width: 50%; text-align: center; color: #FC7404 ;" @click="pwdConfirm">
								确认</view>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
		<public-fixed-box bottom>
			<button class="payment-confirm" @click="confirmWithdraw()" :disabled="canWithdraw">确认提现</button>
		</public-fixed-box>
	</view>
</template>

<script>
	// import {
	// 	orderApi
	// } from '@/common/user.js';
	// import {
	// 	payApi
	// } from '@/common/user.js';
	// import {
	// 	userApi
	// } from '../../common/user';
	import configUrl from '@/utils/config.js';
	export default {
		name: "Withdraw",
		data() {
			return {
				code: '', // 支付密码
				focus: false, // input是否聚焦
				orderId: 0,
				paymethod: "0",
				withdrawableAmount: 0,

				canWithdraw: false,
				withdrawAmount: '',
				cardInfo: [],
				cardTitle: "请选择提现银行卡",

				ICON_ALIPAY: configUrl.appurlImg + "/app/alipay.png",
				ICON_WECHAT: configUrl.appurlImg + "/app/wechat.png",
				ICON_WECHATPAY: configUrl.appurlImg + "/app/wechatpay.png",
				ICON_UNIONPAY: configUrl.appurlImg + "/app/unionpay.png",

			};
		},
		onLoad(e) {
			let self = this;
			this.orderId = e.orderId;
			// payApi.getWithdrawInfo().then(res => {
			// 	self.withdrawableAmount = res;
			// });
			this.getWalletInfo();
		},
		methods: {
			changePayM(i){
				this.paymethod = i;
				this.cardTitle = '请选择提现银行卡';
				this.cardInfo = [];
			},
			getWalletInfo() {
				let self = this;
				userApi.getWalletInfo().then(res => {
					console.log('获取数据：', res);
					// self.purseSection1 = res.purseSection1;
					// self.purseSection2 = res.purseSection2;
					// self.purseSection3 = res.purseSection3;
					self.withdrawableAmount = res.balance;
				});
			},
			confirmWithdraw() {
				let amountLimit = parseFloat(this.withdrawableAmount);
				let wAmount = parseFloat(this.withdrawAmount);
				if (amountLimit < wAmount) {
					uni.showToast({
						title: '提现金额超出限额',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (wAmount == 0) {
					uni.showToast({
						title: '请输入提现金额',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				// if (this.paymethod == 1 || this.paymethod == 2) {
				// 	uni.showToast({
				// 		title: '暂不支持！',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				if (this.cardInfo.length == 0 && this.paymethod == 0) {
					uni.showToast({
						title: '请选择提现银行卡',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				
				if(this.paymethod == 2){
					userApi.checkZfb().then(res => {
						if(res.ishave < 1){
							uni.showToast({
								title: '请先绑定支付宝账号',
								duration: 2000,
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/users/MyInfo?action=zfb',
								})
							},2000);
							return;
						}else{
							this.canWithdraw = true;
							// this.$refs.pwd.open();
							
							this.pwdConfirm()
						}
					});
				}else{
					
					this.canWithdraw = true;
					// this.$refs.pwd.open();
							this.pwdConfirm()
				}
				
			},
			focusClick() {
				this.focus = true
			},
			// 输入框失去焦点
			inputCodeBlur(e) {
				let value = e.detail.value
				this.focus = false
			},
			// 输入框聚焦时触发（没用到）
			inputFocus(e, height) {
				console.log(e)
			},
			// 输入框内容变化事件
			inputCode(e) {
				let value = e.detail.value
				this.code = value
			},
			pwdCancel() {
				this.code = "";
				this.canWithdraw = false;
				this.$refs.pwd.close();
			},
			pwdConfirm() {
				let self = this;
				// userApi.verifyPayPassword({
				// 	pwd: this.code
				// }).then(res => {
					payApi.doWithdraw({
						type: self.paymethod,
						amount: self.withdrawAmount,
						bankcard_id: self.cardInfo.id,
						paypassword: self.code
					}).then(res => {
						uni.showToast({
							title: '提现申请已提交',
							duration: 2000,
							icon: 'none'
						});
						let hBack = setInterval(function() {
							clearInterval(hBack);
							uni.redirectTo({
							  url: '/pages/users/WithdrawList'
							});
						}, 2000);
					});
				// 	self.$refs.pwd.close();
				// });
			},
			toBankCard() {
				let self = this;
				uni.$off('chooseCard');
				uni.$on('chooseCard', function(cardId) {
					uni.$off('chooseCard');
					self.paymethod = "0";
					payApi.getCardInfo({
						cardId: cardId
					}).then(res => {
						self.cardInfo = res;
						self.cardTitle = self.cardInfo.bankName + "(" + self.cardInfo.number + ")";
					});
				});
				uni.navigateTo({
					url: '/pages/users/Bankcards'
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		// position: absolute;
		display: flex;
		flex-direction: column;
		justify-items: flex-start;
		padding: 0 30rpx;
		height: 100vh;

	}

	.amount-group {
		margin-top: 60rpx;
		margin-bottom: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.payment-remain-time {
		font-size: 24rpx;
		color: #777;
	}

	.payment-amount {
		margin-top: 20rpx;
		color: #fd9036;
		font-size: 40rpx;
	}

	.payment-amount text {
		font-size: 48rpx;
	}

	.payment-timeout-tips {
		font-size: 26rpx;
		color: #777;
		margin-top: 20rpx;
	}

	.payment-selection-group {
		background-color: #FFF;

	}

	.payment-selection-list {
		display: flex;
		flex-direction: column;
	}

	.payment-selection-item {
		display: flex;
		flex-direction: row;
		margin-top: 40rpx;
		align-items: center;
	}

	.image-round {
		width: 60rpx;
		height: 60rpx;
		background-color: #000;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.image-rect {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.payment-name {
		flex: 1;
	}

	.payment-confirm {
		margin-bottom: 30rpx;
		margin-left: 5vw;
		margin-right: 5vw;
		background-color: #fc7404;
		color: #fff;
		border-radius: 30rpx;
		width: 90vw;
	}

	.input-item {
		width: 0rpx;
		height: 0rpx;
	}

	.code-list {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;

		.code-item {
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border: 1rpx solid #eee;
			background-color: #F6F6F6;
			border-radius: 10rpx;
		}
	}
</style>